<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>2048 Game</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>2048</h1>
        <button id="newGameButton">New Game</button>
        <p>Score: <span id="score">0</span></p>
    </header>
    <div id="grid-container">
        <div class="grid-cell" id="grid-cell-0-0"></div>
        <div class="grid-cell" id="grid-cell-0-1"></div>
        <div class="grid-cell" id="grid-cell-0-2"></div>
        <div class="grid-cell" id="grid-cell-0-3"></div>
        <div class="grid-cell" id="grid-cell-1-0"></div>
        <div class="grid-cell" id="grid-cell-1-1"></div>
        <div class="grid-cell" id="grid-cell-1-2"></div>
        <div class="grid-cell" id="grid-cell-1-3"></div>
        <div class="grid-cell" id="grid-cell-2-0"></div>
        <div class="grid-cell" id="grid-cell-2-1"></div>
        <div class="grid-cell" id="grid-cell-2-2"></div>
        <div class="grid-cell" id="grid-cell-2-3"></div>
        <div class="grid-cell" id="grid-cell-3-0"></div>
        <div class="grid-cell" id="grid-cell-3-1"></div>
        <div class="grid-cell" id="grid-cell-3-2"></div>
        <div class="grid-cell" id="grid-cell-3-3"></div>
    </div>
    <div id="gameover">GAME OVER</div>


    <script type="text/javascript">
        const board = Array.from({ length: 4 }, () => Array(4).fill(0));
        let score = 0;

        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('newGameButton').addEventListener('click', newGame);
            document.addEventListener('keydown', handleKeyPress);
            newGame();
        });

        function newGame() {
            for (let i = 0; i < 4; i++) {
                for (let j = 0; j < 4; j++) {
                    board[i][j] = 0;
                }
            }
            score = 0;
            updateScore();
            generateNewNumber();
            generateNewNumber();
            updateBoard();
            document.getElementById('gameover').style.display = 'none';
        }

        function generateNewNumber() {
            let emptyCells = [];
            for (let i = 0; i < 4; i++) {
                for (let j = 0; j < 4; j++) {
                    if (board[i][j] === 0) {
                        emptyCells.push({ x: i, y: j });
                    }
                }
            }
            if (emptyCells.length === 0) return;
            const { x, y } = emptyCells[Math.floor(Math.random() * emptyCells.length)];
            board[x][y] = Math.random() < 0.9 ? 2 : 4;
        }

        function updateBoard() {
            for (let i = 0; i < 4; i++) {
                for (let j = 0; j < 4; j++) {
                    const cell = document.getElementById(`grid-cell-${i}-${j}`);
                    cell.textContent = board[i][j] === 0 ? '' : board[i][j];
                    cell.style.backgroundColor = getBackgroundColor(board[i][j]);
                }
            }
        }

        function getBackgroundColor(value) {
            switch (value) {
                case 2: return '#eee4da';
                case 4: return '#ede0c8';
                case 8: return '#f2b179';
                case 16: return '#f59563';
                case 32: return '#f67c5f';
                case 64: return '#f65e3b';
                case 128: return '#edcf72';
                case 256: return '#edcc61';
                case 512: return '#edc850';
                case 1024: return '#edc53f';
                case 2048: return '#edc22e';
                default: return '#cdc1b4';
            }
        }

        function handleKeyPress(event) {
            switch (event.key) {
                case 'ArrowUp':
                    moveUp();
                    break;
                case 'ArrowDown':
                    moveDown();
                    break;
                case 'ArrowLeft':
                    moveLeft();
                    break;
                case 'ArrowRight':
                    moveRight();
                    break;
            }
            generateNewNumber();
            updateBoard();
            if (isGameOver()) {
                document.getElementById('gameover').style.display = 'block';
            }
        }

        function moveUp() {
            for (let j = 0; j < 4; j++) {
                let compressed = compress(board.map(row => row[j]));
                for (let i = 0; i < 4; i++) {
                    board[i][j] = compressed[i];
                }
            }
        }

        function moveDown() {
            for (let j = 0; j < 4; j++) {
                let compressed = compress(board.map(row => row[j]).reverse()).reverse();
                for (let i = 0; i < 4; i++) {
                    board[i][j] = compressed[i];
                }
            }
        }

        function moveLeft() {
            for (let i = 0; i < 4; i++) {
                board[i] = compress(board[i]);
            }
        }

        function moveRight() {
            for (let i = 0; i < 4; i++) {
                board[i] = compress(board[i].reverse()).reverse();
            }
        }

        function compress(row) {
            let newRow = row.filter(val => val !== 0);
            for (let i = 0; i < newRow.length - 1; i++) {
                if (newRow[i] === newRow[i + 1]) {
                    newRow[i] *= 2;
                    score += newRow[i];
                    newRow[i + 1] = 0;
                }
            }
            newRow = newRow.filter(val => val !== 0);
            while (newRow.length < 4) {
                newRow.push(0);
            }
            updateScore();
            return newRow;
        }

        function updateScore() {
            document.getElementById('score').textContent = score;
        }

        function isGameOver() {
            for (let i = 0; i < 4; i++) {
                for (let j = 0; j < 4; j++) {
                    if (board[i][j] === 0) return false;
                    if (i < 3 && board[i][j] === board[i + 1][j]) return false;
                    if (j < 3 && board[i][j] === board[i][j + 1]) return false;
                }
            }
            return true;
        }



    </script>


    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #faf8ef;
        }

        header {
            text-align: center;
            margin-bottom: 20px;
        }

        h1 {
            font-size: 60px;
            margin: 0;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            margin-top: 10px;
            cursor: pointer;
        }

        p {
            font-size: 24px;
            margin: 10px 0;
        }

        #grid-container {
            width: 460px;
            height: 460px;
            padding: 20px;
            background-color: #bbada0;
            border-radius: 10px;
            position: relative;
            display: grid;
            grid-template-columns: repeat(4, 100px);
            grid-template-rows: repeat(4, 100px);
            gap: 20px;
        }

        .grid-cell {
            width: 100px;
            height: 100px;
            background-color: #ccc0b3;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            color: #776e65;
        }

        #gameover {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            font-size: 48px;
            padding: 20px;
            border-radius: 10px;
        }
    </style>

</body>

</html>